<template lang="pug">
  div.action-bar
    div.active-nav(:class="[navIndex === 1 ? 'actived' : '']",@click="$router.push('/')")
      i.iconfont(:class="[navIndex === 1 ? 'icon-shouyetianchong' : 'icon-shouye']")
      span 首页
    div.active-nav(:class="[navIndex === 2 ? 'actived' : '']",@click="toTask")
      template(v-if="navIndex === 2")
        i.iconfont.icon-renwutianchong
      i.iconfont.icon-renwu
      span.renwu-text 任务
    div.active-nav(:class="[navIndex === 3 ? 'actived' : '']",@click="$router.push('/wode')")
      i.iconfont(:class="[navIndex === 3 ? 'icon-wodetianchong' : 'icon-wode']")
      span 我的
</template>
<script>
  export default {
    props: ['navIndex'],
    data() {
      return {}
    },
    methods: {
      toTask() {
        if (this.navIndex === 2) {
          this.$router.push('/newTask')
        } else {
          this.$router.push('/task')
        }
      }
    }
  }
</script>
<style scoped lang="less">
  .action-bar {
    width: 100%;
    border-top: 1px solid #f5f5f5;
    background: #fff;
    position: fixed;
    bottom: 0;
    padding: 12px 0;
    .active-nav {
      width: 100% / 3;
      float: left;
      span {
        font-size: 10px;
        color: #808080;
      }
      .iconfont {
        display: block;
      }
      .icon-shouye, .icon-renwu, .icon-wode {
        color: #808080;
      }
      .icon-renwutianchong {
        font-size: 60px;
        position: absolute;
        top: -14px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .actived {
      span {
        color: #080c15;
      }
      .icon-renwu, .renwu-text {
        opacity: 0;
      }
    }
  }
</style>
